<template>
  <!-- 　　　　<p>序号: {{ order + 1 }}</p> -->
  <Row>
    <Col :span="2">
      <FormItem
        label="名称"
        :name="['formList', order, 'officeListName']"
        :rules="rules.officeListName"
      >
        <Input v-model:value="form.officeListName" />
      </FormItem>
    </Col>
    <Col :span="2">
      <FormItem label="数量" :name="['formList', order, 'listNumber']" :rules="rules.listNumber">
        <Input v-model:value="form.listNumber" />
      </FormItem>
    </Col>
    <Col :span="2">
      <FormItem label="单位" :name="['formList', order, 'unit']" :rules="rules.unit">
        <Input v-model:value="form.unit" />
      </FormItem>
    </Col>
    <Col :span="2">
      <FormItem label="单价" :name="['formList', order, 'price']" :rules="rules.price">
        <Input v-model:value="form.price" />
      </FormItem>
    </Col>
    <Col :span="2">
      <FormItem label="总价" :name="['formList', order, 'allPrice']" :rules="rules.allPrice">
        <span>{{ calculatePrice() }}</span>
        <!-- <Input v-model:value="form.allPrice" disabled/> -->
      </FormItem>
    </Col>
    <Col :span="4">
      <FormItem
        label="日期"
        :name="['formList', order, 'purchaseDate']"
        :rules="rules.purchaseDate"
      >
        <DatePicker v-model:value="form.purchaseDate" valueFormat="X" />
      </FormItem>
    </Col>
    <Col :span="4">
      <FormItem label="备注" :name="['formList', order, 'reason']" :rules="rules.reason">
        <!-- <textarea v-model:value="form.reason" /> -->
        <!-- <Input v-model:value="form.reason" type="textarea" /> -->
        <a-textarea v-model:value="form.reason" />
      </FormItem>
    </Col>
    <Col :span="4">
      <FormItem label="附件" :name="['formList', order, 'url']">
        <BasicUpload
          :maxSize="10"
          :maxNumber="1"
          :emptyHidePreview="true"
          @change="handleChange"
          :uploadParams="uploadParams"
          :api="uploadApi"
          v-model:value="form.url"
        ></BasicUpload>
      </FormItem>
    </Col>
    <Col :span="2" style="justify-content: center; display: flex">
      <Button @click="deleteTable">删除</Button>
    </Col>
  </Row>
</template>
<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue';
import { Input, FormItem, DatePicker, Row, Col, message } from 'ant-design-vue';
import { Button } from '/@/components/Button';
import { BasicUpload } from '/@/components/Upload';
import { uploadApi } from '/@/api/sys/upload';
import { getToken } from '/@/utils/auth';
export default defineComponent({
  name: 'CreateItem',
  components: { FormItem, Input, Button, DatePicker, Row, Col, BasicUpload },
  props: {
    order: {
      // 表单序号
      type: Number,
      default: 0,
    },
    form: {
      // 每一项表单
      type: Object,
      default: () => {},
    },
  },
  setup(props, { emit }) {
    const formRef = ref(null);
    const uploadParams = ref({
      Authorization: 'Bearer ' + getToken(),
      // 'tenant-id': getTenantId(),
    });
    const rules = {
      officeListName: [{ required: true, message: '请输入物品名称', trigger: 'blur' }],
      listNumber: [{ required: true, message: '请输入数量', trigger: 'blur' }],
      unit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
      price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
      purchaseDate: [{ required: true, message: '请输入日期', trigger: 'blur' }],
    };
    const count = ref(0);
    //计算单价价钱
    function calculatePrice() {
      let num = 0;
      if (props.form.listNumber && props.form.price) {
        console.log('val', props);
        num = props.form.listNumber * props.form.price;
      }
      return num;
    }
    function handleChange(val) {
      console.log('val', val);
      message.success('操作成功！');
    }

    const deleteTable = () => {
      console.log();

      if (props.order < 1) {
      }
      emit('deleteTable', props.order);
    };
    return {
      deleteTable,
      rules,
      formRef,
      uploadApi,
      uploadParams,
      handleChange,
      calculatePrice,
    };
  },
});
</script>
